<template>
    <el-form class="registration_box" ref="ruleFormRef" :model="userinfo" :rules="rules" label-position="top">
        <h1 class="logtitle">欢迎注册</h1>
        <div class="retuser">
            <el-form-item prop="username">
                <el-input v-model.trim="userinfo.username" placeholder="请输入注册账号" maxlength="11" clearable
                    size="large" />
            </el-form-item>
        </div>
        <div class="retpwd">
            <el-form-item prop="password">
                <el-input v-model.trim="userinfo.password" type="password" placeholder="请输入密码" maxlength="16"
                    show-password size="large" />
            </el-form-item>
        </div>
        <div class="retconfirm">
            <el-form-item prop="confirm">
                <el-input v-model.trim="userinfo.confirm" type="password" placeholder="再次输入密码" maxlength="18"
                    show-password size="large" />
            </el-form-item>
        </div>
        <div class="retbtn">
            <el-form-item>
                <el-button class="ret_btn" size="large" type="primary" plain @click="submitregister">注册
                </el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import url from "../../common/js/APIUtil";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
//表单数据
const userinfo = reactive({
    username: "",
    password: "",
    confirm: "",
});

const { proxy } = getCurrentInstance();
const router = useRouter();

//表单验证
const ruleFormRef = ref();
const rules = reactive({
    username: [
    {
        required: true,
        message: "账号不能为空",
        trigger: "blur",
    },
    { min: 5, max: 16, message: "账号长度不能小于5位", trigger: "blur" },
    ],
    password: [
    {
        required: true,
        message: "密码不能为空",
        trigger: "blur",
    },
    { min: 6, max: 18, message: "密码长度不能小于6位", trigger: "blur" },
    ],
    confirm: [
    {
        required: true,
        message: "确认密码不能为空",
        trigger: "blur",
    },
    ],
});
//提交注册信息
const submitregister = () => {
    ruleFormRef.value.validate((valid) => {
    if (valid) {
        if (userinfo.password === userinfo.confirm) {
        proxy.$http({
            method: "post",
            url: url.API_POST_REGISTER,
            data: userinfo
        }).then(res => {
            const data = res.data
            if(data.code === 200){
                ElMessage.success("创建成功")
                router.push({
                    path: "/LoginRegistration",
                    query: {
                        second:"first"
                    }
                })
                setTimeout(function () {
                    location.reload();
                }, 100);
            }else if(data.code === 111){
                ElMessage.warning("账号已存在，请重新创建")
            }else{
                ElMessage.warning("未知错误")
            }
        });
        } else {
            ElMessage.warning("两次密码不一致");
        }
    } else {
        ElMessage.warning("请调整数据再请求");
        return false;
    }
    });
};
</script>

<style scoped>

.registration_box{
    justify-content: center;
    align-items: center;
    transform: translate(0%, 15%);
}
.logtitle{
    transform: translate(22%, -10%);
}
.retuser{
    width: 60%;
    transform: translate(35%, 40%);
}
.retpwd{
    width: 60%;
    transform: translate(35%, 40%);
}
.retconfirm{
    width: 60%;
    transform: translate(35%, 40%);
}
.retbtn{
    width: 60%;
    transform: translate(35%, 50%);
}
.ret_btn {
  width: 100%;
  height: 100%;
}
</style>